<template>
  <div class="div_box">
    <div class="header">
      <div class="header_left">
        <el-form
          :inline="true"
          ref="refSearchForm"
          class="search-form"
          size="small"
        >
          <el-form-item size="small">
            <el-input
              v-model="deviceCode"
              clearable
              @clear="clearDetectorName"
              placeholder="请输入设备编码"
              size="small"
              style="width: 220px"
              maxlength="20"
            >
              <el-button
                slot="append"
                :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                @click="searchClick"
              >
              </el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="header_right"></div>
    </div>
    <div class="content">
      <el-table
        :data="alarmData"
        class="table"
        height="320"
        ref="refTable"
        row-key="id"
        :header-cell-style="headerStyle"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="80"
          height="30"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="imei"
          label="设备编码"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="orgName"
          label="联网单位"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="spaceName"
          label="安装点"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="installTime"
          label="安装时间"
          min-width="110"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="management"
          label="操作"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="绑定"
              placement="bottom"
              v-if="detail.cameraStatus == 0"
            >
              <i
                @click="onBinding(scope.row)"
                class="iconfont bangding tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="解绑"
              placement="bottom"
              v-else-if="
                detail.cameraStatus == 1 &&
                detail.cameraInfo.imei == scope.row.imei
              "
            >
              <i
                @click="onUnbundle(scope.row)"
                class="iconfont jiechubangding tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @pagination="getList"
        class="pagination"
      >
      </pagination>
    </div>
  </div>
</template>

<script>
import {
  reqPageRommDevice,
  reqBindingCamera,
  reqUnbindingCamera,
  reqDetectorDetail,
} from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";

export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
    roomId: {
      type: String,
      default: () => "",
    },
  },
  components: {
    Pagination,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      loadingSearch: false, //查询按钮loading
      page: 1,
      limit: 10,
      total: 0,
      alarmData: [],
      detail: {},
      deviceCode: "",
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {},
  methods: {
    // 探测器详情
    async getDetectorDetail() {
      let res = await reqDetectorDetail({
        deviceCode: this.deviceInfo.parentDeviceCode, //父级设备编码
        detectorCode: this.deviceInfo.deviceCode, //探测器编码
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.detail = res.data.detail || "";
    },
    async onUnbundle() {
      const result = await this.$confirm("是否解绑该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {});
      if (result !== "confirm") return;
      let res = await reqUnbindingCamera(this.deviceInfo.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("解绑成功");
      this.getDetectorDetail();
    },
    async onBinding(e) {
      const result = await this.$confirm("是否绑定到该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {});
      if (result !== "confirm") return;
      let res = await reqBindingCamera({
        cameraCode: e.imei,
        id: this.deviceInfo.id,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("绑定成功");
      this.getDetectorDetail();
    },
    clearDetectorName() {
      this.page = 1;
      this.limit = 10;
      this.getList();
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getList();
      this.loadingSearch = false;
    },
    // 获取列表
    async getList() {
      let res = await reqPageRommDevice(this.page, this.limit, {
        roomId: this.roomId,
        deviceType: "Camera",
        deviceCode: this.deviceCode,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);

      this.total = res.data.total || 0;
      this.alarmData = res.data.rows || [];
    },
  },
  deactivated() {},
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");
.div_box {
  height: 100%;
  overflow: auto;
  width: 100%;
}
.header {
  display: flex;
  justify-content: space-between;

  .header_left {
    height: 100%;
    display: flex !important;
    align-items: flex-start !important;
  }

  .header_right {
    height: 100%;
    margin-top: 5px;
  }

  .left {
    font-size: 15px;
    color: @primaryTxtcolor;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;

    .label {
      margin: 0 10px;

      .name {
        font-size: 16px;
      }
    }
  }

  .right {
    margin-right: 10px;
  }
}
.content {
  height: 100%;
}
</style>
